<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>颜色主题</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义颜色，如果设置则会覆盖主题色。格式#eee</view>
			</view>
			<view class="tr">
				<view>textColor</view>
				<view>String</view>
				<view>无</view>
				<view>固定文字颜色</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String, Number</view>
				<view>无</view>
				<view>日期按钮圆角，可带单位</view>
			</view>
			<view class="tr">
				<view>size</view>
				<view>String</view>
				<view>md</view>
				<view>预定尺寸，目前只对提交按钮有效</view>
			</view>
			<view class="tr">
				<view>plain</view>
				<view>Boolean</view>
				<view>false</view>
				<view>镂空样式</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>String, Number, Date, Array</view>
				<view>无</view>
				<view>初始值，根据选择类型，值类型有差异</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>formatSet</view>
					<view>Object</view>
					<view>无</view>
					<view>内部时间显示格式，头部标题及工具条</view>
				</view>
				<view class="appendix">
					<view>year: YYYY年</view>
					<view>month: MM月</view>
					<view>time: hh:mm:ss</view>
					<view>timeM: hh:mm</view>
				</view>
			</view>
			<view class="tr">
				<view>weekSet</view>
				<view>Object</view>
				<view>无</view>
				<view>星期显示文字定义，格式：{0:"周日", 1:"周一", ...}</view>
			</view>
			<view class="tr">
				<view>weekHeight</view>
				<view>Number</view>
				<view>3</view>
				<view>星期条高度，固定单位em</view>
			</view>
			<view class="tr">
				<view>rowHeight</view>
				<view>Number</view>
				<view>3</view>
				<view>日期行高，固定单位em</view>
			</view>
			<view class="tr">
				<view>rowSpace</view>
				<view>Number</view>
				<view>0.2</view>
				<view>日期行间距，固定单位em。首行顶部和尾行底部会额外留出rowSpace/2的距离</view>
			</view>
			<view class="tr">
				<view>weekendType</view>
				<view>String</view>
				<view>无</view>
				<view>周末主题色</view>
			</view>
			<view class="tr">
				<view>weekendColor</view>
				<view>String</view>
				<view>无</view>
				<view>周末自定义色</view>
			</view>
			<view class="tr">
				<view>weekendTextColor</view>
				<view>String</view>
				<view>无</view>
				<view>周末固定文字色</view>
			</view>
			<view class="tr">
				<view>mode</view>
				<view>String</view>
				<view>radio</view>
				<view>选择模式，可选：radio单选、checkbox多选、range选区</view>
			</view>
			<view class="tr">
				<view>pickTime</view>
				<view>Boolean</view>
				<view>false</view>
				<view>开启时间选择，radio模式有效</view>
			</view>
			<view class="tr">
				<view>useSecond</view>
				<view>Boolean</view>
				<view>false</view>
				<view>使用秒单位，pickTime开启后有效</view>
			</view>
			<view class="tr">
				<view>rangeBgOpacity</view>
				<view>Number</view>
				<view>0.1</view>
				<view>选区背景透明度</view>
			</view>
			<view class="tr">
				<view>pickerRadius</view>
				<view>String</view>
				<view>无</view>
				<view>拾取器按钮圆角</view>
			</view>
			<view class="tr">
				<view>pickerMaskBgColor</view>
				<view>String</view>
				<view>rgba(0,0,0,0.2)</view>
				<view>拾取器弹窗遮罩层颜色</view>
			</view>
			<view class="tr">
				<view>start</view>
				<view>Number, String, Date</view>
				<view>无</view>
				<view>选取限制，开始日期</view>
			</view>
			<view class="tr">
				<view>end</view>
				<view>Number, String, Date</view>
				<view>无</view>
				<view>选取限制，结束日期</view>
			</view>
			<view class="tr">
				<view>min</view>
				<view>Number</view>
				<view>1</view>
				<view>最少选取个数，checkbook模式有效</view>
			</view>
			<view class="tr">
				<view>max</view>
				<view>Number</view>
				<view>无</view>
				<view>最大选取个数，checkbook模式有效</view>
			</view>
			<view class="tr">
				<view>useLunar</view>
				<view>Boolean</view>
				<view>false</view>
				<view>开启农历标签</view>
			</view>
			<view class="tr">
				<view>tagList</view>
				<view>Array</view>
				<view>无</view>
				<view>自定义标签，格式：{ name:"标题", value:"时间，天", event:"事件名", }</view>
			</view>
			<view class="tr">
				<view>useToolbar</view>
				<view>Boolean</view>
				<view>true</view>
				<view>开启工具栏，显示已选</view>
			</view>
			<view class="tr">
				<view>tipsFormat</view>
				<view>String</view>
				<view>YYYY-MM-DD</view>
				<view>工具栏显示已选的日期格式</view>
			</view>
			<view class="tr">
				<view>useSubmitButton</view>
				<view>Boolean</view>
				<view>true</view>
				<view>开启提交按钮</view>
			</view>
			<view class="tr">
				<view>submitWidth</view>
				<view>String, Number</view>
				<view>无</view>
				<view>提交按钮宽，可带单位</view>
			</view>
			<view class="tr">
				<view>submitRadius</view>
				<view>String, Number</view>
				<view>circle</view>
				<view>提交按钮圆角</view>
			</view>
			<view class="tr">
				<view>submitSize</view>
				<view>String</view>
				<view>md</view>
				<view>提交按钮预定义尺寸</view>
			</view>
			<view class="tr">
				<view>submitPlain</view>
				<view>Boolean</view>
				<view>false</view>
				<view>提交按钮镂空</view>
			</view>
			<view class="tr">
				<view>submitHeight</view>
				<view>Number</view>
				<view>2.5</view>
				<view>提交按钮高，可带单位</view>
			</view>
			<view class="tr">
				<view>resFormat</view>
				<view>String</view>
				<view>无</view>
				<view>返回结果格式，可选ISO字串、UTC字串、Date对象，默认timestamp时间戳</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>iconfont图标数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>calendar：icon-calendar 已选显示日期</view>
					<view>time：icon-clock 已选显示时间</view>
					<view>to：icon-to 已选显示至</view>
					<view>prevMonth：icon-arr-left 上一月</view>
					<view>nextMonth：icon-arr-right 下一月</view>
					<view>prevYear：icon-arr-double-left 上一年</view>
					<view>nextYear：icon-arr-double-right 下一年</view>
					<view>delete：icon-delete 删除</view>
				</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>text</view>
					<view>Object</view>
					<view></view>
					<view>内部文字数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"文字"}
					<view>confirm：确定　提交按钮</view>
					<view>todayShot：今　导航按钮</view>
					<view>today：今日　日期按钮</view>
					<view>start：开始　选区按钮</view>
					<view>end：结束　选区按钮</view>
					<view>dateSelected：已选　工具条文字</view>
					<view>tipDateEmptyError：请选择一个日期　出错提示</view>
					<view>tipDateMinError：请至少选择{$min}个日期　出错提示</view>
					<view>tipDateMaxError：请选择{$min}至{$max}个日期　出错提示</view>
					<view>tipDateRangeError：请选择日期范围　出错提示</view>
				</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>只读</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view></view>
				<view>值改变事件，依照resFormat设置提交已选值，radio为值，checkbook为数组，range为两个元素的数组</view>
			</view>
			<view class="tr">
				<view>@submit</view>
				<view>事件</view>
				<view></view>
				<view>提交按钮点击事件，依照resFormat设置提交已选值</view>
			</view>
			<view class="tr">
				<view>@ready</view>
				<view>事件</view>
				<view></view>
				<view>props的value值改变完成事件，依照resFormat设置提交已选值</view>
			</view>
			<view class="tr">
				<view>@event</view>
				<view>事件</view>
				<view></view>
				<view>自定义事件，在自定义标签定义，点击日期触发。提交参数{event:"事件名",item:"当前日期对象"}</view>
			</view>
			<view class="tr">
				<view>getData</view>
				<view>function</view>
				<view></view>
				<view>由refs外部调用，依照resFormat手动获取已选值</view>
			</view>
		</view>
		
		
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-calendar :value="当前值">&lt;/vi-calendar>`}}
			</view>
			<view class="py-sm">
				<view class="">
					<vi-calendar plain pickTime useSecond></vi-calendar>
				</view>
			</view>
			<view class="py-sm">
				多选
				<view class="">
					<vi-calendar mode="checkbox" radius="0.5em" weekendType="fourth"></vi-calendar>
				</view>
			</view>
			<view class="py-sm">
				选区
				<view class="">
					<vi-calendar mode="range" useLunar radius="0.5em"></vi-calendar>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
